Hexo NexT 主题添加动画插件

嗨！看我博客左上角的小人儿～(手机端就算了)

写在前面

之前刚架自己独立博客时偶然间看到了这个小动画，觉得非常有趣。奈何那时自己属于技术新手，只能眼巴巴地看着别人“高端大气上档次,炫酷狂拽叼炸天”，自己在墙角暗暗“觊觎”。

今天无聊翻看收藏夹时又看到了它，自我感觉应该有此程度的装X能力了，遂装之。

现留配置笔记，以作纪念。

添加动画插件

追根溯源

各种跟踪，代码作者貌似是这个 G 友，证据如下：

向他致敬。

添加步骤

1.
在主题配置文件 _config.yml 中预先添加如下代码：

# Some suprise plugs
suprise:
  # 踢皮球动画开关
  ball_enable: true

2.
在 NexT 主题目录中，打开文件 next/layout/_layout.swig 预先添加如下代码：

# 判断上面 ball_enable 开关，导入 _partials/suprise/ball.swig (此文件我们下一步添加)
{% if theme.suprise.ball_enable %}
    {% include ’_partials/suprise/ball.swig’ %}
{% endif %}

3.
上一步说要导入 ball.swig ，现在就创建一个文件 next/layout/_partials/suprise/ball.swig ，这里面是显示的字 why you are here? ，代码如下：

<div id="idhyt-surprise-ball">
  <div id="idhyt-surprise-ball-animation">
    <!--why you are here? -->
    <span id="layer0Go" class="drag">w</span>
    <span id="layer1Go" class="drag">h</span>
    <span id="layer2Go" class="drag">y</span>
    <span id="layer3Go" class="drag"></span>
    <span id="layer4Go" class="drag">y</span>
    <span id="layer5Go" class="drag">o</span>
    <span id="layer6Go" class="drag">u</span>
    <span id="layer7Go" class="drag">a</span>
    <span id="layer8Go" class="drag">r</span>
    <span id="layer9Go" class="drag">e</span>
    <span id="layer10Go" class="drag">h</span>
    <span id="layer11Go" class="drag">e</span>
    <span id="layer12Go" class="drag">r</span>
    <span id="layer13Go" class="drag">e</span>
    <span id="layer14Go" class="drag">?</span>
    <span id="layer15Go" class="drag ball"></span>
  </div>
</div>